<template>
  <div class="tabs">
    <div class="tabs_header">
      <a
        href="javascript:;"
        @click="tabClickHandle(0)"
        :class="currentTab === 0 ? 'on' : ''"
        class="tabsleft"
        ><slot name="tabsLeft"></slot
      ></a>
      <a
        href="javascript:;"
        @click="tabClickHandle(2)"
        :class="currentTab === 2 ? 'on' : ''"
        class="tabscenter"
        v-if="tabLen !== 2"
        ><slot name="tabsCenter"></slot
      ></a>
      <a
        href="javascript:;"
        @click="tabClickHandle(1)"
        :class="currentTab === 1 ? 'on' : ''"
        class="tabsright"
        ><slot name="tabsRight"></slot
      ></a>
    </div>
    <div class="tabs_content">
      <div v-if="currentTab === 0"><slot name="tabsLeftContent"></slot></div>
      <div v-if="currentTab === 2 && tabLen !== 2">
        <slot name="tabsCenterContent"></slot>
      </div>
      <div v-if="currentTab === 1"><slot name="tabsRightContent"></slot></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Tabs",
  props: {
    tabLen: {
      type: Number,
      default() {
        return 2;
      },
    },
  },
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    tabClickHandle(index) {
      this.currentTab = index;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.tabs {
  .tabs_header {
    display: flex;
    a {
      width: 50%;
      font-size: 24 / @base;
      border-bottom: 1 / @base solid #ccc;
      padding: 5 / @base;
      background: #fff;
      color: #ccc;
      &.on {
        color: #000;
        border-bottom: 1 / @base solid #000;
      }
      &:first-child {
        border-right: 1 / @base solid #ccc;
      }
      &:last-child {
        border-left: 1 / @base solid #ccc;
        border-right: 0;
      }
    }
  }
  .tabs_content {
    position: relative;
    min-height: 300 / @base;
  }
}
</style>
